<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id = "app">
        <h1>{{msg}} </h1>
        <hr>
        <div>
            <p>显示留言</p>
            <ul>
                <li v-for="(item,index) in list">{{item.title}}  - <button v-on:click ="list.splice(index,1)">删除</button> - 
                    <button v-on:click=upTolist(index)>修改</button>   <input type="text" v-model="item1" > 
                </li>
            </ul>
            <hr>
            <p>{{word}} </p>
            <p>
                <input type="text" v-model="text">
                <button v-on:click="addTolist()">请留言</button>
            </p>
 

        </div>

    </div>
    
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"Vue 实现简单的留言板",
            list:[
                {title:"楼主好帅"},
                {title:"楼上好帅"},
                {title:"楼下好帅"}
            ],
            word:"添加留言",
            text:"",
            item:""
        },
        methods:{
            addTolist(){
                this.list.push({
                    title:this.text
                })
            },
            upTolist(er){
                this.list.splice(er,1, {title:this.item1})
            },
            show(){
                this.style({dispaly:none})
            }
            

        }
    })
</script>
</html>